<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>后台管理-权限管理</title>
		<link rel="stylesheet" href="/resources/src/css/lib/bootstrap.min.css"/>
		<link rel="stylesheet" href="/resources/src/css/admin/main.css" />
		<style>
			
			.check-row { position:relative; margin-bottom:20px; }

			.label { height:18px; line-height:18px; color:#000; font-weight:100; }
			.label input[type="checkbox"] { opacity: 0; cursor:pointer; width:18px; height:18px; position:absolute; left:0; z-index:3; }
			
			.label input+span { display:inline-block; width:16px; height:16px; background-color:#f2f2f2; border-radius:2px; position:absolute; top:1px; left:0; z-index:2; }
			.label input+span i{display:none;}
			.label input:checked+span { background-color:#23a8f5; text-align:center; }
			.label input:checked+span i { color:#fff; font-size:14px; display:inline-block;}
			
			.show-details{ display:inline-block; color:#000; font-size:16px; cursor:pointer; margin-left:18px; }
			.show-details:hover{ color:#000; }
			.show-details i{ color:#ccc; display:inline-block; margin-left:4px;}
			.show-details .rotate{ transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg);}
			
			.access-details{ width:474px; height:52px; line-height:52px; background-color:#f2f2f2; margin-top:16px; margin-left:20px; padding-left:20px; padding-right:20px; box-sizing:border-box; display:none; }
			.access-details span{ margin-right:50px; display:inline-block; width:100px; }
			
			.submit{left:0;}
			
		</style>
    </head>
    <body>
		<article class="main">
			<div class="main-wrapper">
				<section class="content">
					<div class="container">
						<div class="con-header">
							<jsp:include page="../common/folderbar.jsp" />
						</div>
						<div class="con-body">
							<div class="check-row">
								<div class="label">
									<input type="checkbox" value="0" /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">用户管理<i class="iconfont icon-zuoyoujiantouicon10024 right-arrow"></i></a>
								</div>
								<div class="access-details">
									<span>添加用户</span><span>修改账户信息</span>
								</div>
							</div>
							<div class="check-row">
								<div class="label">
									<input type="checkbox" value="1"  /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">权限控制<i class="iconfont icon-zuoyoujiantouicon10024 right-arrow"></i></a>
								</div>
								<div class="access-details">
									<span>设置权限</span>
								</div>
							</div>
							<div class="check-row">
								<div class="label">
									<input type="checkbox"  value="2" /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">项目管理<i class="iconfont icon-zuoyoujiantouicon10024 right-arrow"></i></a>
								</div>
								<div class="access-details">
									<span>投资人项目</span><span>创业者项目</span>
								</div>
							</div>
							<div class="check-row">
								<div class="label">
									<input type="checkbox"  value="3" /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">机构管理<i class="iconfont icon-zuoyoujiantouicon10024 right-arrow"></i></a>
								</div>
								<div class="access-details">
									<span>机构成员</span><span>机构项目</span>
								</div>
							</div>
							<div class="check-row">
								<div class="label">
									<input type="checkbox"  value="4" /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">消息管理<i class="iconfont icon-zuoyoujiantouicon10024 right-arrow"></i></a>
								</div>
								<div class="access-details">
									<span>新建消息</span>
								</div>
							</div>
							<div class="check-row">
								<div class="label">
									<input type="checkbox"  value="5" /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">反馈内容<i class="iconfont icon-zuoyoujiantouicon10024"></i></a>
								</div>
								<div class="access-details">
									<span>反馈列表</span>
								</div>
							</div>
							<div class="check-row">
								<div class="label">
									<input type="checkbox"  value="6" /><span><i class="iconfont icon-duoxuan"></i></span>
									<a class="show-details">申请试用<i class="iconfont icon-zuoyoujiantouicon10024"></i></a>
								</div>
								<div class="access-details">
									<span>申请列表</span>
								</div>
							</div>
							<div class="con-footer">
								<div class="submit text-center">
									<p class="btn-text">
										<span>确认</span>
									</p>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</article>
		
		<script src="/resources/src/js/jquery-2.1.4.js"></script>
		<script src="/resources/src/js/jquery.nicescroll.js"></script>
		<script src="/resources/src/js/admin/main.js"></script>
		<script>
			$(function(){
				$(".con-body").on("click",".show-details",function(){
					var parents=$(this).parents(".check-row");
					parents.find(".access-details").fadeToggle();
					$(this).find("i").toggleClass("rotate");
				});
				
				$(".submit").on("click",function(){
					var $checkbox=$(".con-body input:checked");
					var len=$checkbox.length;
					
					//没有选择任何权限时，提示错误
					if(len<=0){
						//错误提示
						var errHTML="<i class='iconfont icon-cuowu'></i>";
						Global.submitTip(".btn-text","turnErr",errHTML);
					}
					else{
						//以下代码在ajax返回成功后执行
						var sucHTML="<i class='iconfont icon-jiuxu'></i>";
						Global.submitTip(".btn-text","turnSuccess",sucHTML);
					}
				});
			});
		</script>
 	</body>
</html>